<template>
    <div>
      <cheader></cheader>
      <el-container>
        <el-main style="margin-left: 150px;">
          <el-row>
            <h1>整租·帅府园 1室1厅 东/西</h1>
          </el-row>
          <el-row>
            <span style="color:#606266;line-height: 30px;">房源维护时间：2020-02-08 </span><br>
            <span style="color:#606266">房源编号：BJ2419320526553497600 </span>
          </el-row>
          <el-row style="margin-top: 20px;">
            <el-col :span="10" style="margin-right:20px;">
              <div style="width:100%;height:400px;border: 1px red solid">

              </div>
            </el-col>
            <el-col :span="10" style="margin-right:20px;">
              <div style ="width:100%;height:400px;border: 1px red solid">
                <el-row>
                  <el-col>
                    <span style="font-weight: bold;font-size: 28px;color: darkgreen">3300元/月</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                  <el-col>
                    <el-tag size="mini">近地铁</el-tag>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                  <el-col>
                    <span style="color: #606266;line-height: 26px;">租赁方式：<span>整租</span></span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col>
                    <span style="color: #606266;line-height: 26px;">租赁方式：<span>整租</span></span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col>
                    <span style="color: #606266;line-height: 26px;">租赁方式：<span>整租</span></span>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                  <el-col :span="4">
                    <el-image style="width: 80px;height: 80px;border-radius: 50%" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-image>
                  </el-col>
                  <el-col :span="12">
                    <el-row><h3>张航</h3></el-row>
                    <el-row>链家经纪人</el-row>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-button type="primary" style="margin: 10px;">在线咨询</el-button>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <h2>房屋信息</h2>
            <el-row>
              <el-col :span="4">
                <span>基本信息</span>
              </el-col>
              <el-col :span="6">
                <el-row style="line-height: 30px;">面积：64㎡</el-row>
                <el-row style="line-height: 30px;">面积：64㎡</el-row>
                <el-row style="line-height: 30px;">面积：64㎡</el-row>
                <el-row style="line-height: 30px;">面积：64㎡</el-row>
                <el-row style="line-height: 30px;">面积：64㎡</el-row>
                <el-row style="line-height: 30px;">面积：64㎡</el-row>
                <el-row style="line-height: 30px;">面积：64㎡</el-row>


              </el-col>
              <el-col :span="6">
                <el-row style="line-height: 30px;">面积：<span>64㎡</span></el-row>
                <el-row style="line-height: 30px;">面积：64㎡</el-row>
                <el-row style="line-height: 30px;">面积：64㎡</el-row>
                <el-row style="line-height: 30px;">面积：64㎡</el-row>
                <el-row style="line-height: 30px;">面积：64㎡</el-row>
                <el-row style="line-height: 30px;">面积：64㎡</el-row>
                <el-row style="line-height: 30px;">面积：64㎡</el-row>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-col :span="4">
                <span>看房</span>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" size="mini">预约看房</el-button>

              </el-col>

            </el-row>
            <el-row style="margin-top: 20px">
              <el-col :span="4">
                <span>配套设施</span>
              </el-col>
              <el-col :span="2" style="text-align: center">
                <el-row style="line-height: 40px"><i class="el-icon-help" style="font-size:32px;width: 36px;height: 36px"></i></el-row>
                <el-row>电视</el-row>
              </el-col>

              <el-col :span="2" style="text-align: center">
                <el-row style="line-height: 40px"><i class="el-icon-help" style="font-size:32px;width: 36px;height: 36px"></i></el-row>
                <el-row>电视</el-row>
              </el-col>
              <el-col :span="2" style="text-align: center">
                <el-row style="line-height: 40px"><i class="el-icon-help" style="font-size:32px;width: 36px;height: 36px"></i></el-row>
                <el-row>电视</el-row>
              </el-col>
              <el-col :span="2" style="text-align: center">
                <el-row style="line-height: 40px"><i class="el-icon-help" style="font-size:32px;width: 36px;height: 36px"></i></el-row>
                <el-row>电视</el-row>
              </el-col>
              <el-col :span="2" style="text-align: center">
                <el-row style="line-height: 40px"><i class="el-icon-help" style="font-size:32px;width: 36px;height: 36px"></i></el-row>
                <el-row>电视</el-row>
              </el-col>
              <el-col :span="2" style="text-align: center">
                <el-row style="line-height: 40px"><i class="el-icon-help" style="font-size:32px;width: 36px;height: 36px"></i></el-row>
                <el-row><span>电视</span></el-row>
              </el-col>
            </el-row>
          </el-row>
          <el-row>
            <h2>房源描述</h2>
            <el-row style="margin-bottom: 20px;">
              <el-col :span="12" style="line-height: 28px">
                【交通出行】
                小区距离八通线通州北苑站986m（来源于百度地图） 公交车站（1）：复兴里：317路、802路、通22路、通2路、通43路 （2）后南仓：317路、802路、809路
              </el-col>
            </el-row>
            <el-row style="margin-bottom: 20px;">
              <el-col :span="12" style="line-height: 28px">
                【周边配套】
                小区北侧就是万达广场、万达宝贝王，万达影城，永辉超市，建行，国泰百货，东侧是潞河医院
              </el-col>
            </el-row>
            <el-row style="margin-bottom: 20px;">
              <el-col :span="12" style="line-height: 28px">
                【周边配套】
                小区北侧就是万达广场、万达宝贝王，万达影城，永辉超市，建行，国泰百货，东侧是潞河医院
              </el-col>
            </el-row>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <h2>费用详情</h2>
            <el-row>
              <h4>年租价 当租期不足1年时租金可能会上浮，详询管家</h4>
            </el-row>
            <el-row style="line-height: 44px;">
              <el-col :span="4">付款方式</el-col>
              <el-col :span="4">租金 (元/月)</el-col>
              <el-col :span="4">押金 (元)</el-col>
              <el-col :span="4">服务费 (元)</el-col>
              <el-col :span="4">中介费 (元)</el-col>
            </el-row>
            <el-row>
              <el-col :span="4">季付</el-col>
              <el-col :span="4">3300</el-col>
              <el-col :span="4">3300</el-col>
              <el-col :span="4">3300</el-col>
              <el-col :span="4">3300</el-col>
            </el-row>
          </el-row>
          <el-row>
            <h2>推荐经纪人</h2><span>您可以通过拨打电话或在线咨询的方式联系经纪人</span>
            <el-row style="line-height: 44px;margin-top: 20px;">
              <el-col :span="8">
                <el-card shadow="never">
                  <el-row>
                    <el-col :span="6">
                      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="width: 100px;height: 170px;">
                    </el-col>
                    <el-col :span="12">
                      <span>张惠铭</span><br>
                      <span>评分:4.5 | 20次评价</span>
                      <span>4008896805转88073</span>
                      <span><el-button type="success">在线咨询</el-button></span>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="never">
                  <el-row>
                    <el-col :span="6">
                      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="width: 100px;height: 170px;">
                    </el-col>
                    <el-col :span="10">
                      <span>张惠铭</span><br>
                      <span>评分:4.5 | 20次评价</span>
                      <span>4008896805转88073</span>
                      <span><el-button type="success">在线咨询</el-button></span>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
            <el-row>
              <h2>地址和交通</h2>
              <el-row>
                <baidu-map style="width: 100%;height: 300px" :center="center" :zoom="zoom" @ready="handler">
                </baidu-map>
              </el-row>
            </el-row>
          </el-row>
        </el-main>

      </el-container>

    </div>


</template>

<script type="text/javascript">
  import cheader from "@/components/cheader";
  import BMap from 'BMap'
    export default {
        name: "info",
        data () {
            return {
                center: {lng: 0, lat: 0},
                zoom: 3
            }
        },
        methods :{
            handler ({BMap, map}) {
                console.log(BMap, map)
                this.center.lng = 116.404
                this.center.lat = 39.915
                this.zoom = 15
            }
        },
        components:{
            cheader
        },
        mounted() {
            console.log(this.$route.params.id)
        },
        created() {
            var id = this.$route.params.id;
            alert(id)
        }
    }
</script>

<style scoped>
 span{
   color: #606266;
 }
</style>
